import React from 'react'
import { Route ,Redirect,Switch} from 'react-router-dom'
import Loadable from 'react-loadable'
import createHistory from 'history/createBrowserHistory'

const history = createHistory()
const { location } = history

const Loading = () => <div>Loading...</div>

const Home = Loadable({
    loader: () => import('./pages/home/home'),
    loading: Loading,
})
const Product = Loadable({
    loader: () => import('./pages/product/product'),
    loading: Loading,
})
const ProductCategory = Loadable({
    loader: () => import('./pages/productCategory/productCategory'),
    loading: Loading,
})
const Order = Loadable({
    loader: () => import('./pages/order/order'),
    loading: Loading,
})
const User = Loadable({
    loader: () => import('./pages/user/user'),
    loading: Loading,
})
const ChildrenCategory = Loadable({
    loader: () => import('./pages/productCategory/childrenCategory'),
    loading: Loading,
})

const OrderDetail = Loadable({
    loader: () => import('./pages/order/detail/detail'),
    loading: Loading,
})

const AddCategory = Loadable({
    loader: () => import('./pages/productCategory/addCategory'),
    loading: Loading,
})
function redirect() {
    if(location.pathname === '' || location.pathname === '/'){
        location.pathname = '/home'
        return (
            <Redirect to="/home" />
    )

    }else {
        return ''
    }
}
const Contents = () => (
 <div>
     <Switch>
         <Route exec path="/home" component={Home} />
         {
             redirect()
         }
         <Route exact path="/product" component={Product} />
         <Route exact path="/product-category" component={ProductCategory} />
         <Route exact path="/order" component={Order} ></Route>
         <Route exact path="/user" component={User} />
         <Route exact={true} path="/order/detail/:orderId" component={OrderDetail} />
         <Route exact={true} path="/product-category/children/:id" component={ChildrenCategory} />
         <Route exact={true} path="/product-category/add" component={AddCategory} />

     </Switch>

 </div>
)

export default Contents
